<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>时间显示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 100px;
            background-color: #f0f0f0;
        }
        .time-container {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 80px;
            font-weight: bold;
        }
        .digit {
            width: 60px;
            height: 100px;
            margin: 0 5px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
        .colon {
            width: 20px;
            height: 100px;
            margin: 0 10px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>
    <div class="time-container">
        <div class="digit" id="hour1"></div>
        <div class="digit" id="hour2"></div>
        <div class="colon" id="colon"></div>
        <div class="digit" id="minute1"></div>
        <div class="digit" id="minute2"></div>
    </div>

    <script>
  
        const digitImages = {
            0: './images/dg0.gif',
            1: './images/dg1.gif',
            2: './images/dg2.gif',
            3: './images/dg3.gif',
            4: './images/dg4.gif',
            5: './images/dg5.gif',
            6: './images/dg6.gif',
            7: './images/dg7.gif',
            8: './images/dg8.gif',
            9: './images/dg9.gif'
        };


        const colonImages = {
            bright: './images/dgon.gif',
            dark: './images/dgoff.gif'
        };

    
        function updateTime() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');

       
            document.getElementById('hour1').style.backgroundImage = `url(${digitImages[hours[0]]})`;
            document.getElementById('hour2').style.backgroundImage = `url(${digitImages[hours[1]]})`;

     
            document.getElementById('minute1').style.backgroundImage = `url(${digitImages[minutes[0]]})`;
            document.getElementById('minute2').style.backgroundImage = `url(${digitImages[minutes[1]]})`;
        }


        let colonState = 'bright';
        function updateColon() {
            colonState = colonState === 'bright' ? 'dark' : 'bright';
            document.getElementById('colon').style.backgroundImage = `url(${colonImages[colonState]})`;
        }


        updateTime();
        updateColon();
        setInterval(updateTime, 1000); 
        setInterval(updateColon, 500); 
    </script>
</body>
</html>